<!DOCTYPE html>
<!-- 测试基本折线表，并设置其属性 2 -->
<!-- 	this.chartSettings = {
			labelAlias: {
			    'PV': '访问用户',
			    'Order': '下单用户'
			},
			legendAlias: {
			    '访问用户': '访问用户 total: 10000'
			}
	    } -->
<html lang="en">
	<head>
		<title>v-charts</title>
		<!-- v-charts-v2 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/numeral/numeral.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/v-charts-v2/lib/index.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts-v2/lib/style.min.css">
	</head>
	<body>
		<div id="app">
			<ve-line :data="chartData" :settings="chartSettings"></ve-line>
		</div>

	</body>

	<script>
		new Vue({
			el: "#app",
			data() {
				this.chartSettings = {
				      labelAlias: {
				        'PV': '访问用户',
				        'Order': '下单用户'
				      },
				      legendAlias: {
				        '访问用户': '访问用户 total: 10000'
				      }
				    }
				return {
					chartData: {
					        columns: ['date', 'PV', 'Order', 'OrderRate'],
					        rows: [
					          { 'date': '1/1', 'PV': 1393, 'Order': 1093, 'OrderRate': 0.32 },
					          { 'date': '1/2', 'PV': 3530, 'Order': 3230, 'OrderRate': 0.26 },
					          { 'date': '1/3', 'PV': 2923, 'Order': 2623, 'OrderRate': 0.76 },
					          { 'date': '1/4', 'PV': 1723, 'Order': 1423, 'OrderRate': 0.49 },
					          { 'date': '1/5', 'PV': 3792, 'Order': 3492, 'OrderRate': 0.323 },
					          { 'date': '1/6', 'PV': 4593, 'Order': 4293, 'OrderRate': 0.78 }
					        ]
					}
				}
			}
		})
	</script>

</html>
